// app-nvue 不支持的样式
/* #ifndef APP-NVUE */

// 百分比宽度高度
@for $i from 10 through 100 {
    .w_#{$i} {
        width:$i#{'%'};
    }
    .h_#{$i} {
        height:$i#{'%'};
    }
}


// 底部安全区域
.bottom_area{
    bottom: env(safe-area-inset-bottom);
}

// 该属性能阻止元素的默认事件 可选值 auto
.pointer_none{
    pointer-events: none
}
.flex_col_between{
    align-content: space-between;
}

.flex_col_around{
    align-content: space-around;
}

@for $i from 1 through 5 {
    .flex_#{$i}{
        flex: $i;
    }
}

// 文本不换行
.text_nowrap {
    white-space: nowrap;
}

// 文字间距
@for $i from 1 through 10 {
    .l_s_#{$i} {
        letter-spacing: $i + px;
    }
}

// 弹性盒子排序  子元素使用  父元素必须为flex布局
@for $i from 1 through 5{
    .flex_order_#{$i}{
        order: $i;
    }
}

.vi_hidden{
    visibility: hidden;
}

// display隐藏
.di_none{
    display: none;
}

// 转为块元素
.display_block{
    display: block;
}

// 转为行内块元素
.display_in_bl{
    display: inline-block;
}

// 字体加粗
@for $i from 300 through 900 {
    .f_w_#{$i} {
        font-weight: $i;
    }
}

.line_1{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@for $i from 2 through 5 {
    .line_#{$i}{
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: $i;
    }
}
/* #endif */


/* #ifdef APP-NVUE */
// 文本换行
@for $i from 1 through 5 {
    .line_#{$i}{
        // overflow: hidden;
        text-overflow: ellipsis;  /* 超出部分省略号 */
        lines:$i;//NVUE下要用这个属性，来让文字超出隐藏变省略号
    }
}
/* #endif */

.z_index_hide{
    z-index: -1 !important;
}


// flex布局
.flex{
    display: flex;
    align-items: center;
}

// flex换行
.flex_wrap{
    flex-wrap: wrap;
}
.flex_nowrap{
    flex-wrap: nowrap;
}
// x轴布局
.flex_row{
    flex-direction: row;
}
.flex_row_around{
    justify-content: space-around;
}
.flex_row_between{
    justify-content: space-between;
}
.flex_row_center{
    justify-content: center;
}

// 点击出现背景效果
.box_click_bg:active{
    background-color: rgba(0,0,0,.03);
}



// 实边框
@for $i from 1 through 3 {
    .b_t_s_#{$i} {
        border-top: $i+rpx solid $u-border-color;
    }
    .b_b_s_#{$i} {
        border-bottom: $i+rpx solid $u-border-color;
    }
}

// 字体颜色 3 - 9
@for $i from 3 through 9 {
    .color_#{$i} {
        color: #{'#'}#{$i}#{$i}#{$i};
    }
}

// 透明度
@for $i from 0 through 10 {
    .opacity_#{$i} {
        opacity: $i/10;
    }
}



@mixin positionXY($x,$y) {
    left: $x + rpx;
    top: $y + rpx;
}

// 固定定位
.po_fixed{
    position: fixed;
}
// 相对定位
.po_rela{
    position: relative;
}
// 绝对定位
.po_abso{
    position: absolute;
}

// 定位垂直居中
.y_center {
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
// 定位水平居中
.x_center{
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%) !important;
}
// 定位垂直水平居中
.po_center{
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
}


// 白色
.color_w {
    color: #fff;
}

// 粉色
.color_pink {
    color: pink;
}

// 字体主题色
.p_color {
    color: $u-type-primary;
}

.p_dark_color {
    color: $u-type-primary-dark;
}

.p_disa_color {
    color: $u-type-primary-disabled;
}

// 错误 - 红色
.err_color {
    color: $u-type-error;
}

.err_dark_color {
    color: $u-type-error-dark;
}

// 警告 - 黄色
.w_color {
    color: $u-type-warning;
}

.w_dark_color {
    color: $u-type-warning-dark;
}

// 成功 - 绿色
.s_color {
    color: $u-type-success;
}

.s_dark_color {
    color: $u-type-success-dark;
}

// 主要字体颜色
.zhu_color {
    color: $u-main-color;
}

// 常规
.chang_color {
    color: $u-type-info;
}

// 次要
.ci_color {
    color: $u-type-info;
}

// 占位
.zhan_color {
    color: $u-light-color;
}


// 字体加粗
.f_w_b{
    font-weight: bold;
}
.f_w_n{
    font-weight: normal;
}

// 字体大小
@for $i from 12 through 60{
    .f_s_#{$i}{
        font-size: $i + rpx;
    }
}

// 圆角
@for $i from 10 through 50 {
    .br_#{$i} {
        border-radius: $i + rpx;
    }
}


/* #ifdef APP-NVUE */
.w_100{
    width: 750rpx;
}
/* #endif */

// 内外边距
@for $i from 10 through 60 {
    .p_t_#{$i} {
        padding-top: $i + rpx;
    }
    
    .p_r_#{$i} {
        padding-right: $i + rpx;
    }
    
    .p_b_#{$i} {
        padding-bottom: $i + rpx;
    }
    
    .p_l_#{$i} {
        padding-left: $i + rpx;
    }
    
    .p_row_#{$i} {
        padding-left: $i + rpx;
        padding-right: $i + rpx;
    }
    .p_col_#{$i} {
        padding-top: $i + rpx;
        padding-bottom: $i + rpx;
    }
    
    
    .m_t_#{$i} {
        margin-top: $i + rpx;
    }
    
    .m_r_#{$i} {
        margin-right: $i + rpx;
    }
    
    .m_b_#{$i} {
        margin-bottom: $i + rpx;
    }
    
    .m_l_#{$i} {
        margin-left: $i + rpx;
    }
    
    .m_row_#{$i} {
        margin-left: $i + rpx;
        margin-right: $i + rpx;
    }
    .m_col_#{$i} {
        margin-top: $i + rpx;
        margin-bottom: $i + rpx;
    }
}

// 行高
@for $i from 30 through 60 {
    .line_h_#{$i} {
        line-height: $i + rpx;
    }
}

/* #ifndef APP-NVUE */
// 水平居中
.m_auto {
    margin: 0 auto;
}
/* #endif */

// 超出隐藏
.o_hidden {
    overflow: hidden;
}

// 圆
.br_round {
    border-radius: 50%;
}



// 下划线
.text_down {
    text-decoration: underline;
}

// 删除线
.text_del {
    text-decoration: line-through;
}

// 背景颜色
.bg_w {
    background-color: #fff;
}

// 主题背景
.p_bg {
    background-color: $u-type-primary !important;
}

// 主题背景 - 禁止状态
.p_d_bg {
    background-color: $u-type-primary-disabled;
}

